import React, { Component } from 'react';
import styles from './index.less';
import CSSModules from 'react-css-modules';
import { List, Card, Row, Col, Button, Menu, Icon, Dropdown, Tag, Avatar, Popconfirm } from 'antd';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';

const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const IconText = ({ type, text }) => (
    <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
    </span>
);

const ListExtraButtons = ({ data: { id } }) => {
    const deleteConfirm = () => {
        console.log('删除文章' + id);
    };
    return (
        <div className={styles.listItemExtra}>
            <ButtonGroup>
                <Button size="large">数据</Button>
                <Button size="large">上线/下线</Button>
                <Popconfirm title="确认删除文章?" okText="确认" cancelText="取消" onConfirm={deleteConfirm}>
                    <Button type="danger" size="large">删除</Button>
                </Popconfirm>
            </ButtonGroup>
        </div>
    )
};

const ListContent = ({ data: { content, createdAt, avatar, author, href } }) => (
    <div className={styles.listContent}>
        <p className={styles.description}>{content}</p>
        <div className={styles.extra}>
            <Avatar src={avatar} size="small" /><a href={href}>{author}</a> 发布在 <a href={href}>{href}</a>
            <em>{createdAt}</em>
        </div>
    </div>
);

class SystemDetail extends Component {
    render() {
        const list = [{
            id: 32141,
            picture: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            href: 'e21e',
            title: '文章标题 文章标题 文章标题',
            content: '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
            author: '作者名',
            createdAt: '2017-11-11',
            view: 100321,
            comment: 221,
        }, {
            id: 11222,
            picture: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            href: 'e21e',
            title: '文章标题 文章标题 文章标题222222222222',
            content: '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
            author: '作者11111',
            createdAt: '2017-11-11',
            view: 100321,
            comment: 221,
        }, {
            id: 564341,
            picture: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
            href: 'e21e',
            title: '文章标题 文章标题 文章标题3333333333',
            content: '文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
            author: '作者22222',
            createdAt: '2017-11-11',
            view: 100321,
            comment: 221,
        }];
        return (
            <div className={`${styles.content} ${styles['home-container']}`}>
                <Card style={{ marginBottom: 24 }} bordered={false}>
                    <List
                        size="large"
                        rowKey="id"
                        itemLayout="vertical"
                        dataSource={list}
                        renderItem={(item) => (
                            <List.Item
                                key={item.id}
                                actions={[
                                    <IconText type="eye-o" text={item.view} />,
                                    <IconText type="message" text={item.comment} />,
                                ]}
                                extra={<ListExtraButtons data={item} />}
                            >
                                <List.Item.Meta
                                    title={(
                                        <a className={styles.listItemMetaTitle} href={item.href}>{item.title}</a>
                                    )}
                                    description={
                                        <span>
                                            <Tag>Ant Design</Tag>
                                            <Tag>设计语言</Tag>
                                            <Tag>蚂蚁金服</Tag>
                                        </span>
                                    }
                                />
                                <ListContent data={item} />
                            </List.Item>
                        )}
                    />
                </Card>
            </div>
        );
    }
}

export default CSSModules(SystemDetail, styles);